<template>
    <div id="app">
      <div id="box">
        <h2 style="margin-top:60px">登录功能</h2>
        <div id="inner">
          <div style="text-align:left" class="top">
              用户名：<input type="text" placeholder="请输入用户名" @blur="changeName($event)" v-model="ruleName.username">
          </div>
          <div style="text-align:left" class="bottom">
              密码：<input type="password" placeholder="请输入密码" class="pas" @blur="changePass($event)" v-model="ruleName.password">
          </div>
  
          <div class="but">
            <button @click="submit()">登录</button>
            <button @click="$router.push('/register')">去注册</button>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import url from '../config/url'
    export default {
      data(){
        return{
          ruleName:{
            username:'',
            password:''
          }
        }
      },
      methods:{
        changeName(event){
          let value = event.target.value;
          if(!/^[a-zA-z0-9]{2,}$/.test(value)){
            this.$tip('请填写正确的用户名！');
            event.target.value = '';
          }else{
            event.target.style.borderColor='green'
          }
        },
        changePass(event){
          let value = event.target.value;
          if(!/^[a-zA-Z0-9]{6,12}$/.test(value)){
            this.$tip('请填写有效的密码！');
            event.target.value = '';
          }else{
            event.target.style.borderColor='green'
          }
        },
        submit(formName){
          this.$http.post(url.login,{
            username:this.ruleName.username,
            password:this.ruleName.password
          })
          .then((res) => {
            console.log(res);
            if(res.data.code === 0){
              localStorage.setItem('username',res.data.data.username)
              localStorage.setItem('token',res.data.token)
              this.$message({
                message:'登录成功',
                type:'success',
                duration:1000,
                onClose:() => {
                  this.$router.push('/admin')
                }
              })
            }else{
              this.$message({
                message:'请输入正确的用户名和密码',
                type:'error',
                duration:1000,
              })
            }
          })
        }
      },
      mounted(){
        // 使用enter键 快捷登录
        document.onkeyup = (event) => {
          var e = event || window.event
          if(e && e.keyCode == 13){
            this.submit();
          }
        }
      }
    }
  </script>
  
  <style lang="scss" scoped>
  #app{
    background-image: url(../assets/images/back.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }
  #box{
    position: absolute;
    right: 100px;
    top:100px;
    width: 350px;
    height: 400px;
    background-color: rgb(179, 103, 143,.5);
    text-align: center;
    // overflow: hidden;
    border-radius:20px;
    #inner{
      position: absolute;
      top: 120px;
      left: 36px;
      width: 300px;
      font-weight: bold;
      .top{
        margin-bottom: 38px;
      }
      input{
        width: 200px;
        height: 40px;
        border: 0;
        background-color: rgba(247, 146, 200, 0.5);
        padding-left: 10px;
        color: #fff;
        font-weight: bold;
      }
      .pas{
        margin-left: 15px;
      }
      .but{
        margin-top: 30px;
        margin-left: -34px;
        button{
          width: 80px;
          height: 30px;
          text-align: center;
          margin-left: 10px;
          background-color: rgb(244, 154, 169);
          border: 0;
        }
      }
    }
  }
  
  </style>